<template>
  <div class="shipping-rate">
    <ServiceProviderSearch
        v-model="store.shippingRateData.customer"
        :searchConfig="store.serviceProviderSearchConfig"
        :isMultiSelect="true"
        @update:modelValue="store.handleSingleServiceProviderSelection"
        @update="store.handleMultiServiceProviderSelection"
    />

    <!-- 显示选中的单个服务提供商信息 -->
    <div v-if="store.shippingRateData.customer.dbdatauser" class="selected-provider">
      <h3>选中的客户：</h3>
      <p>用户名: {{ store.shippingRateData.customer.dbdatauser }}</p>
      <p>职位ID: {{ store.shippingRateData.customer.posid }}</p>
      <p>数据库ID: {{ store.shippingRateData.customer.dbid }}</p>
    </div>

    <!-- 显示选中的多个客户信息 -->
    <div v-if="store.shippingRateData.selectedCustomers.length > 0" class="selected-providers">
      <h3>选中的多个客户：</h3>
      <ul>
        <li v-for="(provider, index) in store.shippingRateData.selectedCustomers" :key="index">
          {{ provider.dbdatauser }} - {{ provider.posid }} - {{ provider.dbid }}
        </li>
      </ul>
    </div>

    <!-- 顶级标签页 -->
    <div class="top-tabs">
      <span
          v-for="(tab, index) in store.topTabsDisplay"
          :key="index"
          :class="{ 'active': store.activeTopTab === store.topTabs[index] }"
          @click="store.setActiveTopTab(store.topTabs[index])"
      >
        {{ tab }}
      </span>
    </div>



    <!-- 货代标签页内容 -->
    <div v-if="store.activeTopTab === 'forwarder'" class="content">
      <FreightForwarderContent
          :freightForwarderData="store.shippingRateData.freightForwarder"
          @update:freightForwarderData="updateFreightForwarderData"
      />
    </div>

    <!-- 其他标签页内容（如果需要的话） -->
    <div v-if="store.activeTopTab === 'shipping'" class="content">
      <!-- Add ShippingCompanyContent component here when available -->
    </div>

    <div v-if="store.activeTopTab === 'cfs'" class="content">
      <!-- Add CFSContent component here when available -->
    </div>

    <div v-if="store.activeTopTab === 'warehouse'" class="content">
      <!-- Add WarehouseContent component here when available -->
    </div>

    <div v-if="store.activeTopTab === 'transport'" class="content">
      <!-- Add TransportContent component here when available -->
    </div>

    <div v-if="store.activeTopTab === 'customs'" class="content">
      <!-- Add CustomsContent component here when available -->
    </div>

    <!-- 费率汇总标签页内容 -->
    <div v-if="store.activeTopTab === 'summary'" class="content">
      <!-- Add summary content component here when available -->
    </div>
  </div>
</template>

<script>
import { useShippingRateStore } from './shippingRateStore'
import FreightForwarderContent from './Forwarder/FreightForwarderContent.vue'
import ServiceProviderSearch from './PageHead/ServiceProviderSearch.vue'

export default {
  name: 'ShippingRateComponent',
  components: {
    FreightForwarderContent,
    ServiceProviderSearch
  },
  setup() {
    const store = useShippingRateStore()
    // 确保 freightForwarder 有正确的初始结构
    if (!store.shippingRateData.freightForwarder) {
      store.shippingRateData.freightForwarder = { business: [] }
    }

    const updateFreightForwarderData = (newData) => {
      store.updateFreightForwarderData(newData)
    }
    return {
      updateFreightForwarderData,
      store
    }
  }
}
</script>

<style scoped>
.shipping-rate {
  font-family: Arial, sans-serif;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.top-tabs {
  display: flex;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  margin-top: 20px;
  overflow-x: auto;
  white-space: nowrap;
}

.top-tabs span {
  padding: 10px 15px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  transition: background-color 0.3s;
}

.top-tabs span.active {
  background-color: #fff;
  border-color: #ccc;
  border-bottom-color: #fff;
  margin-bottom: -1px;
}

.top-tabs span:hover {
  background-color: #e0e0e0;
}

.content {
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
  overflow-x: auto;
}

.selected-provider, .selected-providers {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.selected-provider h3, .selected-providers h3 {
  margin-top: 0;
  color: #333;
}

.selected-providers ul {
  padding-left: 20px;
}

@media (max-width: 1024px) {
  .shipping-rate {
    padding: 10px;
  }

  .top-tabs {
    flex-wrap: nowrap;
  }

  .top-tabs span {
    padding: 8px 12px;
    font-size: 14px;
  }

  .content {
    padding: 15px;
  }
}
</style>
